/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-10-15 16:55:18
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-16 08:15:44
 * @FilePath: /react18-vite-admin/src/views/system/DeptManage/components/EditView.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Row, Col, Form, TreeSelect, Input, Switch } from 'antd';

import CustomDialog from '@/components/ui/CustomDialog/CustomDialog';
import CustomCard from '@/components/ui/CustomCard/CustomCard';
import CenterGap10 from '@/components/ui/CenterGap10/CenterGap10';
import Button from '@/components/ui/Button/Button';
import type { DeptTreeItem } from '@/typings/api/department';
import { useRules } from '@/service/useRules';

import { useForm } from './useForm';

const EditView = (props: {
    parentId?: number;
    detail?: DeptTreeItem;
    open: boolean;
    onClose: () => void;
    afterSubmit: () => void;
}) => {
    const { parentId, detail, open, onClose, afterSubmit } = props;

    const [formRef] = Form.useForm();

    const { requiredRule } = useRules();

    const {
        title,
        handleEdit,
        handleSubmit,
        formModel,
        setFormModel,
        deptTreeItems,
        saveLoading
    } = useForm(formRef, parentId, detail, open, afterSubmit);
    return (
        <CustomDialog title={title} open={open} onClose={onClose}>
            <CustomCard title="">
                <Form
                    form={formRef}
                    onFinish={handleSubmit}
                    onReset={handleEdit}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                >
                    <Row>
                        <Col span="8">
                            <Form.Item
                                label="父级"
                                name="parentId"
                                rules={requiredRule}
                            >
                                <TreeSelect
                                    placeholder="请选择"
                                    value={formModel.parentId}
                                    treeData={[
                                        {
                                            label: '顶级',
                                            value: -1,
                                            children: JSON.parse(
                                                JSON.stringify(deptTreeItems)
                                            )
                                        }
                                    ]}
                                    onChange={(value) =>
                                        setFormModel((draft) => {
                                            draft.parentId = value;
                                        })
                                    }
                                    treeDefaultExpandAll
                                    allowClear
                                />
                            </Form.Item>
                        </Col>

                        <Col span="8">
                            <Form.Item
                                label="科室名称"
                                name="name"
                                rules={requiredRule}
                            >
                                <Input
                                    value={formModel.name}
                                    onChange={(e) =>
                                        setFormModel((draft) => {
                                            draft.name = e.target.value;
                                        })
                                    }
                                    placeholder="请输入用户名"
                                    allowClear
                                ></Input>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <Form.Item label="是否有效" name="valid">
                                <Switch
                                    value={formModel.valid}
                                    onChange={(value) =>
                                        setFormModel((draft) => {
                                            draft.valid = value;
                                        })
                                    }
                                ></Switch>
                            </Form.Item>
                        </Col>
                    </Row>
                    <CenterGap10>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={saveLoading}
                        >
                            提交
                        </Button>
                        <Button htmlType="reset" loading={saveLoading}>
                            重置
                        </Button>
                    </CenterGap10>
                </Form>
            </CustomCard>
        </CustomDialog>
    );
};

export default EditView;
